<template>
  <div class="bottominput">
    <div class="buttomcommentinput" v-if="bottomType === 1">
      <div class="buttomcommentinput_item">
        <ItemImgHead :item="items"></ItemImgHead>
      </div>
      <div class="buttomcommentinput_item">
        <slot name="input"></slot>
      </div>
      <div class="buttomcommentinput_item">
        <slot name="handle"></slot>
      </div>
    </div>
    <div class="snsmessage_main_bottom" v-if="bottomType === 2">
      <div class="snsmessage_main_inputs">
        <div class="snsmessage_main_inputs_item">
          <input
            v-model="messageContent"
            :placeholder="this.$t('lang.发消息')"
          />
        </div>
        <div class="snsmessage_main_inputs_item">
          <a href="javascript:;" @click="clearMessageClickHandle"
            ><i class="icon-close"></i
          ></a>
        </div>
        <div class="snsmessage_main_inputs_item">
          <GoodButton :item="items"></GoodButton>
        </div>
        <div class="snsmessage_main_inputs_item">
          <a href="javascript:;" @click="sendMessageClickHandle">{{
            $t("lang.发送")
          }}</a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "ButtomCommentInput",
  props: {
    items: {
      type: Object,
      default() {
        return {};
      },
    },
    bottomType: {
      type: Number,
      default() {
        return 1;
      },
    },
  },
  data() {
    return {
      messageContent: "",
    };
  },
  components: {
    ItemImgHead: () =>
      import(
        /* webpackChunkName:"itemImgHead" */ "../../components/common/itemImgHead"
      ),
    GoodButton: () =>
      import(
        /* webpackChunkName:"goodButton" */ "../../components/common/goodButton"
      ),
  },
  methods: {
    clearMessageClickHandle() {},
    sendMessageClickHandle() {},
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.buttomcommentinput {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 46 / @base;
  background-color: #fff;
  z-index: 99999;
  display: flex;
  border-top: 1 / @base solid #efefef;
  .buttomcommentinput_item {
    width: 80%;
    &:first-child {
      margin: 5 / @base 0 0;
      width: 20%;
    }
    &:last-child {
      width: 20%;
    }
  }
}
.snsmessage_main_bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  text-align: center;
  .snsmessage_main_inputs {
    border: 1 / @base solid #ccc;
    border-radius: 45 / @base;
    margin: 10 / @base;
    background-color: #fff;
    padding: 10 / @base;
    display: flex;
    .snsmessage_main_inputs_item {
      width: 10%;
      a {
        display: block;
        line-height: 30 / @base;
      }
      &:first-child {
        width: 80%;
        display: flex;
        input {
          display: block;
          padding: 5 / @base;
          width: 100%;
          border: 0;
          color: #000;
        }
      }
      &:last-child {
        width: 20%;
        border-left: 1 / @base solid #efefef;
      }
    }
  }
}
</style>
